<!--
 * @Description: 
 * @Author: Pengfei Zhang
 * @Date: 2021-09-03 14:59:40
 * @LastEditors: Pengfei Zhang
 * @LastEditTime: 2021-09-15 16:49:01
-->
<template>
  <view class="page">
    <view class="detail">
      <!-- 基础信息 -->
      <view class="task-base">
        <view class="task-status-flag">
          <TaskStatusFlag :state="detail.taskStatus" />
        </view>
        <view class="task-base__info">
          <view class="title">{{ detail.taskName }}</view>
        </view>
      </view>
      <!-- 详情 -->
      <view class="detail-content">
        <DetailTab v-model="tabKey" :list="tabList">
          <TaskBaseInfo 
            v-if="tabKey == 1" 
            :taskId="detail.id"
          />
          <TaskRecord 
            v-if="tabKey == 2"
          />
          <TaskFeedback 
            v-if="tabKey == 3"
            :editFeedback="editFeedback"
            :taskHasFeedback="detail.taskHasFeedback"
          />
        </DetailTab>
      </view>
    </view>
    <view class="page-footer" v-if="![5,6].includes(detail.taskStatus) || !editFeedback">
      <button v-if="![1,3].includes(detail.taskStatus)" class="btn-primary-plain">导航</button>
      <button v-if="[2].includes(detail.taskStatus)" class="btn-primary-plain">疑问反馈</button>
      <button v-if="[1,3,4].includes(detail.taskStatus) " class="btn-warn-plain">存在疑问</button>
      <button 
        v-if="![1,3].includes(detail.taskStatus)" 
        class="btn-primary"
        @click="handleFeedback"
      >完成反馈</button>
      <button v-if="[1,3].includes(detail.taskStatus)" class="btn-primary">接受任务</button>
    </view>

    <view class="page-footer" v-if="editFeedback">
      <button 
        class="btn-primary-plain"
        @click="handleFeedbackCancel"
      >取消</button>
      <button class="btn-primary">完成</button>
    </view>
  </view>
</template>

<script>
import TaskStatusFlag from '@/components/taskStatusFlag';
import DetailTab from '@/components/detailTab';
import TaskBaseInfo from  './components/task-base-info.vue'
import TaskRecord from './components/task-record.vue'
import TaskFeedback from './components/task-feedback.vue'

export default {
  components: {
    TaskStatusFlag,
    DetailTab,
    TaskBaseInfo,
    TaskRecord,
    TaskFeedback,
  },
  data() {
    return {
      tabList: [
        { label: '任务描述', value: '1' },
        { label: '执行记录', value: '2' },
        { label: '完成反馈', value: '3' },
      ],
      tabKey: '1',
      detail: {
        taskName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
        taskStatus: 2,
        taskType:1,
        taskHasFeedback:false,
        id:'',
      },
      editFeedback:false, //编辑任务反馈
    }
  },
  onLoad(data) {
    this.detail.id = data.id
  },
  watch: {
    tabKey(val) {
      console.log(val)
    }
  },
  methods: {
    handleFeedback() {
      this.editFeedback = true
      this.tabKey = '3'
    },
    handleFeedbackCancel() {
      this.editFeedback = false
      this.tabKey = '1'
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 40rpx 32rpx 200rpx 32rpx;
  .detail {
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0px 3px 15px rgba(44, 121, 247, 0.2);
  }
  .task-base {
    margin-bottom: 32rpx;
    padding: 0 32rpx 32rpx 32rpx;
    margin-bottom: 20rpx;
    .task-status-flag {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      margin-bottom: 20rpx;
      position:relative;
      top:8rpx;
      left:-24rpx;
    }
    .task-base__info {
      font-size: 24rpx;
    }
    .task-base__foot {
      display: flex;
      align-items: center;
    }
    .status {
      margin-top: 10rpx;
    }
    .title {
      font-family: "Source Han Sans CN Medium";
      font-weight: 500;
      font-size: 32rpx;
      line-height: 50rpx;
      text-align: left;
      color: #2b2b2b;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
    }
    .tag {
      display: inline-block;
      border-radius: 16rpx;
      background: rgba(50, 148, 255, 0.2);
      border: 1px solid #027aff;
      color: #027aff;
      padding: 6rpx 16rpx;
      line-height: 18rpx;
      margin-right: 20rpx;
    }
    .date {
      color: rgba(43, 43, 43, .6);
      .date-icon {
        width: 24rpx;
        height: 24rpx;
        vertical-align: middle;
        margin-right: 10rpx;
      }
      .date-text {
        vertical-align: middle;
      }
    }
    .number {
      display: inline-block;
      width: 40rpx;
      height: 40rpx;
      border-radius: 16rpx;
      background-image: linear-gradient(rgba(255, 203, 82, 1), rgba(255, 164, 81, 1));
      text-align: center;
      line-height: 40rpx;
      color: #FFF;
    }
  }
  .detail-content {
    padding-bottom: 20rpx;
    box-shadow: 0px 3px 15px rgba(44, 121, 247, 0.2);
  }
  

  .page-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0px -5px 10px rgba(44, 121, 247, 0.2);
    display: flex;
    justify-content: space-between;
    padding: 32rpx 10rpx;
    background-color: #fff;
    button {
      width: 208rpx;
      font-size:32rpx;
    }
  }
}
</style>